<template>
  <div>
    <div :id="id" class="myChart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "echart",
  props: {
    option: {
      type: Object,
      default: () => {},
    },
    id: {
      type: String,
      default: "myChart",
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  watch: {
    option(value) {
      this.load();
    },
  },
  mounted() {
    var dom = document.getElementById(this.id);
    this.myChart = echarts.init(dom);

    this.load();
  },
  updated() {
    if (this.myChart) this.myChart.resize();
  },
  methods: {
    load() {
      if (this.option && typeof this.option === "object") {
        this.myChart.setOption(this.option);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
}
.myChart,
.container {
  width: 100%;
  height: 100%;
}
</style>
